<template>
  <view class="bg-surface dark:bg-surface-dark text-onSurface dark:text-onSurface-dark min-h-vh p-4">
    <view class="text-xl font-bold mb-6">日期时间选择器示例</view>

    <!-- 选择器类型选择 -->
    <view class="mb-6">
      <view class="text-lg mb-2">选择器类型：</view>
      <view class="grid grid-cols-2 gap-2">
        <view 
          v-for="(item, index) in pickerTypes" 
          :key="index"
          class="px-4 py-2 rounded border border-gray-200 dark:border-gray-700 text-center"
          :class="{ 'bg-primary text-onPrimary': currentType === item.value }"
          @tap="currentType = item.value"
        >
          {{ item.label }}
        </view>
      </view>
    </view>

    <!-- 选择结果展示 -->
    <view class="p-4 rounded-lg bg-gray-100 dark:bg-gray-800 mb-6">
      <view class="text-lg mb-2">选择结果：</view>
      <view class="text-xl text-primary dark:text-primary-dark">{{ result || '请选择日期时间' }}</view>
    </view>

    <!-- 开启选择器的按钮 -->
    <view>
      <button 
        class="bg-primary text-onPrimary dark:bg-primary-dark dark:text-onPrimary-dark rounded-lg py-3 w-full"
        @tap="openPicker"
      >
        打开日期选择器
      </button>
    </view>

    <!-- 暗黑模式切换按钮 -->
    <view class="absolute top-4 right-4">
      <button 
        class="bg-gray-200 dark:bg-gray-700 rounded-full p-2"
        @tap="toggleDarkMode"
      >
        <view v-if="isDarkMode" class="i-mdi-white-balance-sunny text-lg"></view>
        <view v-else class="i-mdi-moon-waning-crescent text-lg"></view>
      </button>
    </view>

    <!-- 日期选择器组件 -->
    <DatetimePicker
      ref="datePicker"
      :type="currentType"
      :title="getCurrentTypeLabel"
      :radius="true"
      :unitTop="true"
      :maskClosable="true"
      @confirm="onConfirm"
    />
  </view>
</template>

<script>
import DatetimePicker from '@/components/DatetimePicker.vue';

export default {
  components: {
    DatetimePicker
  },
  data() {
    return {
      isDarkMode: false,
      currentType: 1,
      result: '',
      pickerTypes: [
        { label: '年份选择', value: 0 },
        { label: '日期时间', value: 1 },
        { label: '年月日', value: 2 },
        { label: '年月', value: 3 },
        { label: '时分', value: 4 },
        { label: '时分秒', value: 5 },
        { label: '分秒', value: 6 },
        { label: '完整日期时间', value: 7 },
        { label: '日期+小时', value: 8 }
      ]
    };
  },
  computed: {
    getCurrentTypeLabel() {
      const type = this.pickerTypes.find(item => item.value === this.currentType);
      return type ? `选择${type.label}` : '选择日期时间';
    }
  },
  mounted() {
    // 检查系统颜色模式
    this.checkSystemTheme();
  },
  methods: {
    openPicker() {
      this.$refs.datePicker.show();
    },
    onConfirm(e) {
      this.result = e.result;
    },
    toggleDarkMode() {
      this.isDarkMode = !this.isDarkMode;
      this.applyTheme();
    },
    checkSystemTheme() {
      // 检测系统是否为暗色模式
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        this.isDarkMode = true;
        this.applyTheme();
      }
      
      // 监听系统主题变化
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
        this.isDarkMode = e.matches;
        this.applyTheme();
      });
    },
    applyTheme() {
      // 应用暗色/亮色模式
      if (this.isDarkMode) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    }
  }
};
</script>

<style>
/* 确保在H5平台上正确应用暗色模式 */
:root {
  --color-primary: #fcd34d;
  --color-primary-dark: #f59e0b;
  --color-on-primary: #030712;
  --color-on-primary-dark: #f3f4f6;
  --color-surface: #FFFFFF;
  --color-surface-dark: #030712;
  --color-on-surface: #030712;
  --color-on-surface-dark: #FFFFFF;
}

/* 小程序环境需要的样式 */
page {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

.dark page {
  background-color: var(--color-surface-dark);
  color: var(--color-on-surface-dark);
}
</style> 